<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ES Module</title>
</head>
<body>
  <!-- 通过 script 添加 type = module 的属性，就可以以ES Module 的标准执行其中的JS代码 -->
  <script type="module">
    console.log('this is es module')
  </script>

  <!-- ESM 自动采用严格模式，忽略 'use strict'  严格模式有个典型，就是不能在全局范围使用this。在非严格模式，this指向全局对象 -->
  <script type="module">
    console.log(this)
  </script>

  <!-- 每个ES Module 都是运行在单独的私有作用域中 -->
  <script type="module">
    var foo = 100
    console.log(foo) // 100
  </script>
  <script type="module">
    console.log(foo) // Uncaught ReferenceError: foo is not defined
  </script>

  <!-- ESM 是通过CORS的方式请求外部JS模块的 -->
  <script type="module" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <!-- Access to script at 'https://libs.baidu.com/jquery/2.0.0/jquery.min.js' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. -->
<!-- index.html:29 GET https://libs.baidu.com/jquery/2.0.0/jquery.min.js net::ERR_FAILED -->

  <!-- 等待demo.js执行完毕才会执行页面渲染 -->
  <!-- <script src="demo.js"></script> --> 
  <!-- ESM 的 script 标签增加type=module属性会延迟执行脚本，相当于使用defer属性 -->
  <!-- <script type="module" src="demo.js"></script> -->
  <script defer src="demo.js"></script>
  <p>需要显示的内容</p>
</body>
</html>